<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			.reds{
				color : red;
			}
		</style>
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script type="text/javascript" src="../js/bootstrap.min.js" ></script>
		<script>
			$(function(){
				$("ul").on("click","li:not(.disabled,.active)", function(){
					console.info($(this).html());
					$(this).addClass("reds").siblings("li").removeClass("reds");
					$(this).addClass("active red").siblings("li").removeClass("active red");
					$(this).addClass("disabled").siblings("li").removeClass("disabled");
				});
				var tem = '<li class="active"><span>首页</span></li> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li><li><span>5</span></li><li><span>&raquo;</span></li>';
				
				$("ul").append(tem);
				
				var s = "http://www.baidu.com?p=2";
				var index = s.indexOf("?") == -1 ? s.length : s.indexOf("?");
				var url = s.substr(0,index) + "?p=2";
				console.info(url)
				
				
			});
			
		</script>
	</head>
	<body>
		<button type="button" id="btn1">click</button>
		<form id="nav-form">
			<ul class="pagination pagination-sm pager-list" data-only-page="true" data-size="10" data-page="2"  data-total="200"  >
			    
			</ul>
		</form>
	</body>
</html>
